<template>
  <el-dialog v-el-drag-dialog width="800px" :title="formName" :visible="show" @update:visible="updateShow">
    <el-form ref="dataForm" :rules="rules" :model="form" label-position="right" label-width="150px">
      <el-form-item label="方案名称" prop="Sname">
        <el-input v-model="form.Sname" style="width: 500px" />
      </el-form-item>
      <el-form-item label="达标金额" prop="Target">
        <el-input style="width: 500px" type="number" class="sortInput" v-model="form.Target" min="0" @keyup.native="proving2($event)" placeholder=""><template slot="append">元</template></el-input>
      </el-form-item>
      <el-form-item label="扣罚金额" prop="Deduct">
        <el-input style="width: 500px" type="number" class="sortInput" v-model="form.Deduct" min="0" @keyup.native="proving2($event)" placeholder=""><template slot="append">元</template></el-input>
      </el-form-item>
      <el-form-item label="扣罚奖励金额百分比" prop="Percentage">
        <el-input style="width: 500px" type="number" class="sortInput" v-model="form.Percentage" min="0" @keyup.native="proving2($event, '%')" placeholder=""><template slot="append">%</template></el-input>
      </el-form-item>
      <el-form-item label="生效时间" prop="timeValue">
        <el-date-picker style="width: 500px" class="flex-1" v-model="form.timeValue" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注" prop="Remark">
        <el-input style="width: 500px" class="flex-1" type="textarea" placeholder="请输入内容" v-model="form.Remark" maxlength="30" show-word-limit></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="updateShow(false)"> 取消 </el-button>
      <el-button type="primary" @click="save"> 保存 </el-button>
    </div>
  </el-dialog>
</template>
<script>
  import { deepClone } from '@/utils'
  import { savePunish } from '@/api/system/activate-punish'
  import { mapState } from 'vuex'

  export default {
    components: {},
    props: {
      show: {
        type: Boolean,
        default() {
          return false
        }
      },
      formData: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        form: {},
        formTmpl: {},
        rules: {
          Sname: [
            { required: true, message: '名称必填', trigger: 'blur' },
            { min: 1, max: 50, message: '名称长度在 1 到 50 个字符', trigger: 'blur' }
          ],
          timeValue: [
            { required: true, message: '时间必填', trigger: 'blur' },
          ]
        }
      }
    },
    computed: {
      formName() {
        if (this.form.Id) {
          return '编辑'
        }
        return '新增'
      },
      ...mapState({
        userId: state => state.user.id,
      }),
    },
    watch: {
      formData: {
        deep: true,
        immediate: true,
        handler(val) {
          if (this.$refs['dataForm']) {
            this.$refs['dataForm'].clearValidate()
          }
          this.form = deepClone({ ...this.formTmpl, ...val })
          if (this.form.StartTime) {
            // this.form.timeValue = [this.form.StartTime, this.form.EndTime]
            this.$set(this.form, 'timeValue', [this.form.StartTime, this.form.EndTime])
          }
        }
      }
    },
    methods: {
      updateShow(val) {
        this.$emit('update:show', val)
      },
      afterSave() {
        this.$notify({
          title: '操作成功',
          message: 'success',
          type: 'success',
          duration: 2000
        })
        this.updateShow(false)
        this.$emit('finish')
      },
      save() {
        this.$refs['dataForm'].validate((valid) => {
          const formData = deepClone(this.form)
          formData.StartTime = this.form.timeValue[0]
          formData.EndTime = this.form.timeValue[1]
          delete formData['timeValue']
          if (valid) {
            if (this.form.Id) {
              savePunish(formData).then(() => {
                this.afterSave()
              })
            } else {
              savePunish(formData).then(() => {
                this.afterSave()
              })
            }
          }
        })
      }
    }
  }
</script>
